#{extends 'general.html' /} #{set title:'Change Password' /}

<head>
	

    <script type="application/javascript">
		/*	@author Maryam*/
        function changePassword(){
            var oldpassword = document.getElementById("oldPassword").value;
            var newpassword = document.getElementById("newPassword").value;
            var confirmPassword = document.getElementById("confirmPassword").value;
          	 
            var errors = [];
            if (oldpassword.length === 0) {
			
                errors[errors.length] = "You must enter a password.";
            }
            if (newpassword.length === 0) {
					
                errors[errors.length] = "You must enter a password.";
            }
            if (confirmPassword.length === 0) {
				 
                errors[errors.length] = "You must enter a password again.";
            }
            if (!checkLength(newpassword, 6, 24)) {
			
                errors[errors.length] = "Your password must be 6-24 characters long.";
            }
			
            if (newpassword !== confirmPassword) {
			
                errors[errors.length] = "Passwords dont match";
            }
           
            if (errors.length > 0) {
                reportErrors(errors);
                return false;
            }
            else {
            
                $.getJSON('@{ChangePassword.changePass()}', {
                    'oldPassword': oldpassword,
                    'newPassword': newpassword
                }, function(data){
                
                    alert(data.done);
                });
            }
        }
        
        function reportErrors(errors){
            var msg = "There were some problems...\n";
            var numError;
            for (var i = 0; i < errors.length; i++) {
                numError = i + 1;
                msg += "\n" + numError + ". " + errors[i];
            }
            alert(msg);
        }
        
        function checkLength(text, min, max){
        
            if (text.length < min || text.length > max) {
                return false;
            }
            return true;
        }
    </script>
    <script type="text/javascript">
    
        function passwordStrength(password){
        
            var desc = new Array();
            desc[0] = "Very Weak";
            desc[1] = "Weak";
            desc[2] = "Better";
            desc[3] = "Medium";
            desc[4] = "Strong";
            desc[5] = "Strongest";
            
            var score = 0;
            
            if (password.length > 6) 
                score++;
            
            if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) 
                score++;
            
            if (password.match(/\d+/)) 
                score++;
            
            if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) 
                score++;
            
            if (password.length > 12) 
                score++;
            
            document.getElementById("passwordDescription").innerHTML = desc[score];
            document.getElementById("passwordStrength").className = "strength" + score;
            
        }
    </script>
</head>
<body>
    <style>
        .inputHighlighted {
            color: #ff0000;
        }
    </style>
    <style>
        #passwordStrength {
            height: 10px;
            display: block;
            float: left;
        }
        
        .strength0 {
            width: 250px;
            background: #cccccc;
        }
        
        .strength1 {
            width: 50px;
            background: #ff0000;
        }
        
        .strength2 {
            width: 100px;
            background: #ff5f5f;
        }
        
        .strength3 {
            width: 150px;
            background: #56e500;
        }
        
        .strength4 {
            background: #4dcd00;
            width: 200px;
        }
        
        .strength5 {
            background: #399800;
            width: 250px;
        }
    </style>
    <div id="body">
        <fieldset>
            <legend>
            </legend>
            <p>
                <label for="Old Password">
                    Old Password: 
                </label>
                <input name="oldPassword" id="oldPassword" value="" type="password" /><span class="inputHighlighted">*</span>
            </p>
            <p>
                <label for="New password">
                    New Password: 
                </label>
                <input name="newPassword" id="newPassword" value="" type="password" onkeyup="passwordStrength(this.value)"/><span class="inputHighlighted">*</span>
                <div id="passwordDescription">
                    Password not entered
                </div>
                <div id="passwordStrength" class="strength0">
                </div>
            </p>
            <p>
            <br>
            </br>
            <label for="confirm">
                Confirm Password: 
            </label>
            <input name="confirmPassword" id="confirmPassword" value="" type="password" /><span class="inputHighlighted">*</span>
            <p>
                <input type="submit" id="changePassword" value="Change Password" onClick="changePassword()"/>
            </p>
        </fieldset>
    </div>
</body>